<!--与公共头部不同的头部样式 -->
<div id="layout_menu">
    <div class="left">
        <a href="javascript:void(0)">七彩鲜花首页</a>>>> 王妃
    </div>


    <div class="right">
        <ul>
            <a href="javascript:void(0)">
                <li
                    style="background: url(https://www.7hua.com/Tpl/2016skin/Public/images/z_qq.png) no-repeat 10px 15px;background-size: 25px;">
                    QQ:161618181
                </li>
            </a>
            <a href="javascript:void(0)">
                <li
                    style="background: url(https://www.7hua.com/Tpl/2016skin/Public/images/z_wx.png) no-repeat 16px 20px;background-size: 30px;">
                    微信咨询
                </li>
            </a>
            <a href="javascript:void(0)">
                <li
                    style="background: url(	https://www.7hua.com/Tpl/2016skin/Public/images/z_zx.png) no-repeat 16px 13px;background-size: 30px;">
                    我在线，点我咨询
                </li>
            </a>
        </ul>
    </div>
</div>


<!-- 放大镜 -->

<div id="layout_magnifier">
    <div class="center_magnifier">
        <!-- 放大镜功能左侧主图与小图布局 -->
        <div class="left_mag">
            <!-- 上部主图 -->
            <div class="left_img_top">
                <img src="https://img.7hua.com/proimgs/C-0191014201.jpg" alt="" style="z-index: 1;">
                <img src="https://img.7hua.com/proimgs/C-0191014202.jpg" alt="">
                <img src="	https://img.7hua.com/proimgs/F-01910110243.jpg" alt="">
                <img src="https://img.7hua.com/proimgs/F-01910110244.jpg" alt="">
                <div class="focus"></div>
                <div class="mo"></div>
            </div>
            <div class="big_wrapper">
                <img src="https://img.7hua.com/proimgs/F-01910110241.jpg" alt="" style="z-index:11">
                <img src="https://img.7hua.com/proimgs/C-0191014202.jpg" alt="">
                <img src="	https://img.7hua.com/proimgs/F-01910110243.jpg" alt="">
                <img src="https://img.7hua.com/proimgs/F-01910110244.jpg" alt="">
            </div>
            <!-- 底部小图ul>li布局 -->
            <div class="left_img_buttom">
                <div class="img_list">
                    <ul class="small_pic">
                        <li>
                            <a href="javascript:void(0)">
                                <img src="	https://img.7hua.com/proimgs/C-019101601.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img src="https://img.7hua.com/proimgs/C-0191014202.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img src="	https://img.7hua.com/proimgs/F-01910110243.jpg" alt="">
                            </a>
                        </li>
                        <li class="li4">
                            <!-- 这里是渲染的图片 -->
                        </li>
                    </ul>
                </div>
                <span class="span_prev">prev</span>
                <span class="span_next">next</span>
            </div>
            
        </div>
        <!-- 右侧商品详情 -->
        <form action="" class="right_mag">
            <div class="right_mag_top">
                <!-- 第一行文本 -->
                <div class="right_name">
                    <div class="name_top">
                        <div class="name_top_left">
                            <h1>王妃</h1>
                        </div>
                        <div class="name_top_right">
                            <p>
                                产品编号：019101
                            </p>
                        </div>
                    </div>
                    <div class="name_bottom">
                        主材：19枝昆明A级红玫瑰
                    </div>
                </div>
                <!-- 价格横条 -->
                <div class="price_info">
                    <div class="price_info_left">
                        <div class="shop_price">
                            <div class="l">
                                <span>市场价</span>
                            </div>
                            <div class="r">
                                <span>
                                    ￥999
                                </span>
                            </div>
                        </div>
                        <div class="my_price">
                            <div class="ll">
                                <span>七彩价</span>
                            </div>
                            <div class="rr">
                                ￥<span>
                                    9999
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="price_info_center">
                        <span class="gophone">去手机购买
                            <div class="erweima">
                                <img src="https://www.7hua.com/Tpl/2016skin/Public/images/android_ewm.png" alt="">
                            </div>
                        </span>
                    </div>
                    <div class="price_info_right">
                        商品评分
                        <span class="blingbling"></span>
                    </div>
                </div>
                <!-- 第二行文本 -->
                <div class="right_price">
                    <div class="itemDiv" style="border-bottom:0px">
                        <div id="fujiaDiv">
                            <div class="pro-item"> <label style="float:left">选择附加：</label>
                                <dd style="width:520px"> <select id="xh_sel" class="fujia_select xhfujia">
                                        <option value="10">红玫瑰(10元)</option>
                                        <option value="10">粉玫瑰(10元)</option>
                                        <option value="10">白玫瑰(10元)</option>
                                        <option value="15">黄玫瑰(15元)</option>
                                        <option value="15">紫玫瑰(15元)</option>
                                        <option value="20">蓝玫瑰(20元)</option>
                                        <option value="10">香槟玫瑰(10元)</option>
                                    </select> <select id="xh_count" class="fujia_text xhfujia">
                                        <option value="0">无</option>
                                        <option value="1">+1枝</option>
                                        <option value="2">+2枝</option>
                                        <option value="3">+3枝</option>
                                        <option value="4">+4枝</option>
                                        <option value="5">+5枝</option>
                                        <option value="6">+6枝</option>
                                        <option value="7">+7枝</option>
                                        <option value="8">+8枝</option>
                                        <option value="9">+9枝</option>
                                        <option value="10">+10枝</option>
                                    </select> <select id="bh_sel" class="fujia_select xhfujia">
                                        <option value="25">白百合(25元)</option>
                                        <option value="25">黄百合(25元)</option>
                                        <option value="25">粉百合(25元)</option>
                                    </select> <select id="bh_count" class="fujia_text xhfujia">
                                        <option value="0">无</option>
                                        <option value="1">+1枝</option>
                                        <option value="2">+2枝</option>
                                        <option value="3">+3枝</option>
                                        <option value="4">+4枝</option>
                                        <option value="5">+5枝</option>
                                        <option value="6">+6枝</option>
                                        <option value="7">+7枝</option>
                                        <option value="8">+8枝</option>
                                        <option value="9">+9枝</option>
                                        <option value="10">+10枝</option>
                                    </select> <br> <select id="knx_sel" class="fujia_select xhfujia">
                                        <option value="5">红康乃馨(5元)</option>
                                        <option value="5">粉康乃馨(5元)</option>
                                        <option value="5">黄康乃馨(5元)</option>
                                    </select> <select id="knx_count" class="fujia_text xhfujia">
                                        <option value="0">无</option>
                                        <option value="1">+1枝</option>
                                        <option value="2">+2枝</option>
                                        <option value="3">+3枝</option>
                                        <option value="4">+4枝</option>
                                        <option value="5">+5枝</option>
                                        <option value="6">+6枝</option>
                                        <option value="7">+7枝</option>
                                        <option value="8">+8枝</option>
                                        <option value="9">+9枝</option>
                                        <option value="10">+10枝</option>
                                    </select> <select id="hp_sel" class="fujia_select xhfujia">
                                        <option value="38">花瓶小号(38元)</option>
                                        <option value="58">花瓶中号(58元)</option>
                                        <option value="78">花瓶大号(78元)</option>
                                        <option value="98">花瓶特大号(98元)</option>
                                    </select> <select id="hp_count" class="fujia_text xhfujia">
                                        <option value="0">无</option>
                                        <option value="1">+1个</option>
                                        <option value="2">+2个</option>
                                        <option value="3">+3个</option>
                                        <option value="4">+4个</option>
                                        <option value="5">+5个</option>
                                    </select> <br> <select id="pg_sel" class="fujia_select xhfujia"
                                        style="display:none">
                                        <option value="20">苹果(20元)</option>
                                    </select> <select id="pg_count" class="fujia_text xhfujia" style="display:none">
                                        <option value="0">无</option>
                                        <option value="1">+1个</option>
                                        <option value="2">+2个</option>
                                        <option value="3">+3个</option>
                                        <option value="4">+4个</option>
                                        <option value="5">+5个</option>
                                    </select> </dd>
                            </div>
                        </div>
                    </div>







                </div>
                <!-- 第三行文本 -->
                <div class="right_text">
                    <p>
                        说明：受季节和地域影响，各地配材略有差异，配材及包装请以实物为准
                    </p>
                </div>
            </div>
            <!-- 底部按钮 -->
            <div class="right_mag_bottom">
                <div class="change_number">
                    <input type="text" class="change_number_left" value="1"></input>
                    <div class="change_number_right">
                        <button id="add" type="button">+</button>
                        <button id="less" type="button">-</button>
                    </div>
                </div>


                <a href="javascript:void(0)" id="gocart">立即购买</a>
                <button class="btn_buy" type="button">
                    <a href="http://127.0.0.1:5500/dist/car.html" id="addcart">
                        加入购物车
                    </a>
                </button>
            </div>
        </form>
    </div>
</div>

<script src="./javascripts/jQuery.js"></script>
<script>
    $(function () {
        // 数据渲染,准备购物车
        $.ajax({
            url : "./car_data.json"
        })
        .then(function(res){
            render(res.datas)
        })
        function render ( list ){
            goods_data = list;
            $(".li4").append(
                list.map( item => 
                `
                <a href="javascript:void(0)">
                    <img src="${item.img}" alt="">
                </a>
                `)
            )
            $(".rr span").html(
                list.map( item =>
                `
                ${item.price}
                `
                )
            )
            $(".name_top_left").html(
                list.map( item =>
                `
                <h1>${item.name}</h1>
                `
                )
            )
        }

        // 加入购物车功能···等待实现中
        let goods_data = null;
        let cart = {};
        $(".btn_buy")
        .on("click", function () {
            addcar();
        })
        function addcar (){
            goods_data[0].cunt = $(".change_number_left").val();
            cart.data1 = goods_data[0];
            localStorage.setItem("data1" , JSON.stringify( cart))
        }
        // localStorage.clear()
        
        // 放大镜功能
        function Magnifier() {
            // small 部分元素; 
            this.samll_wrapper_ele = $(".left_img_top");
            this.focus_ele = $(".focus");

            this.big_wrapper_ele = $(".big_wrapper");
            // big 部分元素; 
            this.big_img_ele = $(".big_wrapper img");
            //   cosole.log(this.big_img_ele)
        }
        Magnifier.prototype.bindEvent = function () {
            // 存实例对象 : 
            var magnifier_instance = this;

            this.samll_wrapper_ele.mouseover(function () {
                magnifier_instance.toggle("show");
            })
            this.samll_wrapper_ele.mouseout(function () {
                magnifier_instance.toggle("hide");
            })

            this.samll_wrapper_ele.mousemove(function (evt) {
                var e = evt || event;
                magnifier_instance.move(e.offsetX, e.offsetY);
            })
        }
        Magnifier.prototype.toggle = function (type) {
            switch (type) {
                case "show":

                    this.focus_ele.css({
                        display: "block"
                    });

                    this.big_wrapper_ele.css({
                        display: "block"
                    });
                    break;
                case "hide":

                    this.focus_ele.css({
                        display: "none"
                    });


                    this.big_wrapper_ele.css({
                        display: "none"
                    });
                    break;
            }
        }
        Magnifier.prototype.move = function (x, y) {
            var _left = x - 135;
            var _top = y - 135;

            // 边界检测 : 判定数据的极值 ; 

            _left = _left < 0 ? 0 : _left;
            _top = _top < 0 ? 0 : _top;
            // 计算focus的最大移动距离 ; 
            // small的宽度-focus的宽度; 
            // 150 ; 

            _left = _left > 150 ? 150 : _left;
            _top = _top > 150 ? 150 : _top;


            // 给focus定位 : 

            this.focus_ele.css({
                left: _left + "px"
            });
            this.focus_ele.css({
                top: _top + "px"
            });

            // 大图运动 : 
            // - 先计算小图left值和top的运动比例; 
            // left/运动的最大值; 

            var _left_prop = _left / 150;
            var _top_prop = _top / 150;

            // 根据比例让大图运动; 

            this.big_img_ele.css({
                left: -250 * _left_prop + "px"
            });
            this.big_img_ele.css({
                top: -250 * _top_prop + "px"
            });
        }
        new Magnifier().bindEvent();

        // 加减数量功能
        let t = $(".change_number_left");
        $("#add").click(function () {
            t.val(parseInt(t.val()) + 1)
        })
        $("#less").click(function () {
            t.val(t.val() - 1)
        });
        // 图片长条滑动
        $(".span_next").click(function () {
            $(".img_list ul").css({
                left: -258 + "px"
            })
        })
        $(".span_prev").click(function () {
            $(".img_list ul").css({
                left: 0 + "px"
            })
        })

        //更改选中图片
        let pic_top = $(".left_img_top img") 
        let pic_big = $(".big_wrapper img") 
        let pic_list = $(".small_pic li")
        for(let i = 0 ; i < pic_top.length ; i ++){
            pic_list
            .eq(i)
            .on("click" , function(){
                pic_list.css({
                    border: 1+"px solid white"
                })
                pic_top.css({
                    "z-index" : 5
                })
                pic_big.css({
                    "z-index" : 5
                })
                pic_list.eq(i).css({
                    border: 1+"px solid red"
                })
                pic_top.eq(i).css({
                    "z-index" : 7
                })
                pic_big.eq(i).css({
                    "z-index" : 1000
                })
            })
        }

        
    })
</script>